// PageTemplate 组件样式

.page-template {
  // 组合头部卡片样式（面包屑 + 搜索）
  &-header-card {
    margin-bottom: 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fafbfd 0%, #f7f9fc 100%);
    border: 1px solid #e8f4fd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    // 卡片内部布局
    .ant-card-body {
      padding: 12px 24px;
    }
  }

  // 面包屑导航样式
  &-breadcrumb {
    margin-bottom: 12px;

    :global(.ant-breadcrumb) {
      font-size: 14px;
      line-height: 1.4;

      .ant-breadcrumb-link {
        color: #666;
        transition: color 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;

        &:hover {
          color: #1890ff;
        }
      }

      .ant-breadcrumb-separator {
        color: #999;
        margin: 0 8px;
      }
    }
  }

  // 搜索区域样式
  &-search-section {
    // 当面包屑存在时，添加分隔线
    .page-template-breadcrumb + & {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #e8e8e8;
    }
    .ant-pro-query-filter.ant-pro-query-filter {
      padding: 12px 0px;
    }
  }

  // 标题卡片样式（向后兼容）
  &-title-card {
    margin-bottom: 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8faff 0%, #f0f7ff 100%);
    border: 1px solid #e6f7ff;

    .ant-typography {
      margin: 0;
      color: #1890ff;
    }
  }

  // 表格区域卡片样式
  &-table-card {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    // 卡片内部布局
    .ant-card-body {
      padding: 16px 20px;
    }
    .ant-pro-card .ant-pro-card-body {
      padding-inline: 0px;
    }
    // 表格自定义样式变量
    --pro-table-header-background: #fafafa;
  }

  // 工具栏按钮样式
  &-toolbar {
    // 主要按钮（新增按钮）
    &-primary-btn {
      border-radius: 8px;
      background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
      border: none;
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    }

    // 普通按钮样式
    &-normal-btn {
      border-radius: 8px;
    }

    // 危险按钮样式
    &-danger-btn {
      border-radius: 8px;
    }
  }

  // 操作列按钮样式
  &-action {
    &-edit-btn,
    &-delete-btn {
      padding: 0;
    }
  }
}
